<template>
  <div id="main_service_check">
      <div id="top-title"  style="text-align:center;font-size:20px;color:#00B5FF;">
        <p>服务信息待审核列表</p>
      </div>
      <div>
        <label>服务编号：</label>
        <Input v-model="page.action_data.number" style="width:200px"></Input>
        <label>服务标题：</label>
        <Input v-model="page.action_data.name" style="width:200px"></Input>
        <Button type="primary" icon="ios-search" @click="search" >搜索</Button>
     </div>
      <div id="content_service_check" style="margin-top:12px;">
          <Table border :columns="service_table.columns" :data="list"></Table>
          <Modal ref="detail" width="720" :mask-closable="false" :scrollable="false">
                <p slot="header" style="color:#f60;text-align:center;">
                    <Icon type="asterisk"></Icon>
                    <span>标题：{{service.title}}</span>
                </p>
              <div id="detailInformation_service_check" style="margin-left:20px;" class="sheet">
                    <p style="color:#8BC34A;font-size:15px;">详细信息</p>
                    <table>
                        <thead>
                            <tr><th style="width:18%;">审核项</th><th>内容</th></tr>
                        </thead>
                        <tr><td>服务编号</td><td>{{service.number}}</td></tr>
                        <tr><td>服务标题</td><td>{{service.title}}</td></tr>
                        <tr><td>服务类别</td><td>{{service.m_type}}</td></tr>
                        <tr><td>服务机构名称</td><td>{{service.member.enterprise_name}}</td></tr>
                        <tr><td>联系人</td><td>{{service.service_master}}</td></tr>
                        <tr><td>联系电话</td><td>{{service.service_tele}}</td></tr>
                        <tr><td>服务对象</td><td>{{service.service_people}}</td></tr>
                        <tr><td>服务部门</td><td>{{service.service_department}}</td></tr>
                        <tr><td>联系地址</td><td>{{service.service_address}}</td></tr>
                        <tr><td>服务内容</td><td>{{service.service_content}}</td></tr>
                        <tr><td>服务流程</td>
                            <StepsEditor mode="preview_list" source-type="service" :source="service"></StepsEditor>
                        </tr>
                        <tr><td>服务申报条件</td><td>{{service.requirement}}</td></tr>
                        <tr><td>服务特色</td><td>{{service.service_feature}}</td></tr>
                        <tr><td>备注</td><td>{{service.Remark}}</td></tr>
                        <tr><td>发布时间</td><td>{{service.create_time}}</td></tr>
                        <!-- <tr><td>审批时长</td><td>请于<span style="color:red;font-size:15px;">{{service.approve_time}}</span>内审核完毕</td></tr> -->
                        <tr><td>需要文件类型</td><td>{{service.needFileds}}</td></tr>
                        <!-- v-if="service.appendix.length" -->
                        <tr>
                            <td>附件</td>
                            <td>
                                <p v-for="(item,key) in service.appendix" >
                                    <a :href="item.url">{{key+1}}、{{item.name}}</a>
                                </p>
                            </td>
                        </tr>
                    </table>
              </div>
              <div slot="footer" style="text-align:center;">
                <Button type="primary" size="large"  @click="pass()">审核通过</Button>
                <Button type="error" size="large"  @click="fail()">审核未通过</Button>
                <div v-if="formItem.is_show" style="margin-top:10px;">
                    <Form ref="refReason" :model="formItem" :rules="isEmpty" :label-width="100">
                        <FormItem label="未通过原因：" prop="textarea" >
                            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入审核未通过的原因"></Input>
                        </FormItem> 
                    </Form>
                </div>
              </div>
          </Modal>
      </div>
      <AutoPage v-model="page"></AutoPage>
  </div>
</template>
<script>
    import Page from "@/common/model/Page";
    import AutoPage from "@/common/components/AutoPage";
    import Service from "@/common/model/Service.js";
    import parent from "../Parent";
    import StepsEditor from "@/common/components/StepsEditor"
export default {
    extends:parent,
    components:{
        AutoPage,
        StepsEditor
    },
    data () {
        const validateEmpty = (rule, value, callback) => {
            if(value.trim() == "") callback(new Error("*审核未通过原因不能是一系列空格"));
            else callback();
        }
        return {
            page : new Page("check/service"),
            formItem :{
                is_show: false,
                textarea : ''
            },
            isEmpty:{
                textarea:[
                    { required: true, message: '请输入审核未通过的原因', trigger: 'blur' },
                    { validator: validateEmpty, trigger: 'blur'}
                ]
            },
            service_table :{
                columns:[
                    {
                        title: '编号',
                        render: (h ,params) => {
                        return h('div',[
                            h('strong', params.row.number)
                        ])
                        }
                    },
                    {
                        title: '标题',
                        render: (h, params) => {
                            return h('div',[
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        title: '服务类别',
                        render: (h ,params) => {
                            return h('div',[
                                h('strong', params.row.m_type)
                            ]);
                        }
                    },
                    {
                        title: '服务机构名称',
                        render:(h, params) => {
                            return h('div', [
                                h('strong', params.row.member.enterprise_name)
                            ]);
                        }
                    },
                    {
                        title: '联系人',
                        render: (h,params) => {
                            return h('div', [
                                h('Icon', {
                                    props: { type: 'person', color:'#2b85e4',size:'50px'}
                                }),
                                h('strong', params.row.service_master)
                            ]);
                        }
                    },
                    {
                        title: '服务对象',
                        render: (h,params) => {
                            return h('div', [
                                h('strong',params.row.service_people)
                            ]);
                        }
                    },
                    {
                        title: '发布时间',
                        sortable: true,
                        key: 'create_time',
                        render: (h,params) => {
                            return h('div', params.row.create_time);
                            }
                    },
                    {title:'操作', width:150, align:'center', render:(h,params)=>{
                        return h('div', [
                            h('Button', {
                                props: { type: 'primary', size: 'small' },
                                style: { marginRight: '5px',display:this.showButton("111015") },
                                on: { click: () => { this.check(params.index) } }
                            }, '审核'),
                        ]);
                    }}
                ],
                current: new Service(),
            }
        }
    },
    computed :{
        service () {
            return this.service_table.current;
        },
        list(){
            return Service.parseList(this.page.list);
        }
    },
    methods:{
        search(){
            this.page.current_page = 1;
            this.page.getData();       
        },
        check(index){
            this.$refs['detail'].visible = true;
            this.service_table.current = this.list[index];
        },
        fail() {
            if(!this.formItem.is_show) {
                this.formItem.is_show = true;
                return;
            }
            this.$refs["refReason"].validate( valid => {
                if(!valid) return;
                this.api.post('check/service_check', { id: this.service_table.current.id, status: 0, reason: this.formItem.textarea }, res => {
                    this.$CustomMessage.success("*审核完成！");
                    this.$refs['detail'].visible = false;
                    this.page.getData();
                });
            });
        },
        pass() {
            if(!confirm("确认通过审核？")) return;
            this.api.post('check/service_check', { id: this.service_table.current.id, status: 1 }, res => {
                this.$CustomMessage.success("*审核完成！");
                this.$refs['detail'].visible = false;
                this.page.getData();
            });
        }
    }
}
</script>

<style scoped>
    .sheet p {
        margin: 5px;
    }
    .sheet table {
      font-family: Verdana;
      font-weight: bold;  
      border-width: 1px;    
      width: 660px;
      border-collapse: collapse;
  }
  .sheet table thead th{        
      background-color: rgb(81, 130, 187);
      color: #fff;
      border-bottom-width: 0;
  }
  .sheet table tr {
      border-bottom-width: 0;
  }
  .sheet table td {
      border-right: solid 1px rgb(81, 130, 187);  
  }
  .sheet table tr, .sheet table th {
      border-width: 1px;
      border-style: solid;
      border-color: rgb(81, 130, 187);
  }
  .sheet table td, .sheet table th {
      padding: 5px 10px;
      font-size: 13px;
      /* font-family: Verdana;
      font-weight: bold; */
  }
</style>

